<template>
  <div class="page-search" ref="searchRef" :style="{ height: isOverHeight + 'px' }">
    <config-form v-bind="searchFormConfig" v-model="formData" isOver>
      <template #header>
        <span class="header">{{ searchTitle }}</span>
      </template>
      <!-- 表单内部扩展内容 -->
      <template v-for="item in searchFormConfig.formItems" :key="item.field" #[item.slotName]>
        <slot :name="item.slotName" v-if="item.slotName" />
      </template>
    </config-form>
  </div>
  <div class="handle-btns">
    <div class="footer-btns">
      <slot name="footerBtn"></slot>
    </div>
    <div v-if="isShowFooer">
      <el-button icon="refresh" @click="handleRestClick">重置</el-button>
      <el-button type="primary" icon="Search" @click="handleQueryClick">搜索</el-button>
      <el-button
        :icon="!isOverChange ? 'ArrowDown' : 'ArrowUp'"
        @click="handleChangeHeight"
        v-if="isOver"
      >
        {{ !isOverChange ? '展示更多' : '收起更多' }}
      </el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, nextTick, onMounted, ref } from 'vue'
import ConfigForm from '@/base-ui/form/index.vue'
import eventBus from '@/global/event-bus'

const props = defineProps({
  // 检索配置
  searchFormConfig: {
    type: Object,
    reuqired: true
  },
  // 检索标题
  searchTitle: {
    type: String,
    default: ''
  },
  // 是否显示展示更多
  isOver: {
    type: Boolean,
    default: false
  },
  // 收起展示几行
  isShowRowCount: {
    type: Number,
    default: 2
  }
})

const emit = defineEmits(['resetClick', 'queryClick'])

// 双向绑定的属性应该是由配置文件的field来决定
const formItems = props.searchFormConfig?.formItems ?? []
const isShowFooer = props.searchFormConfig?.isShowFooer ?? true
const formOriginData: any = {}
// 动态生成表单初始值
for (const item of formItems) {
  if (item.type === 'switch' || item.type === 'radio') {
    formOriginData[item.field] = false
  } else if (item.type === 'checkbox' || item.type === 'upload') {
    formOriginData[item.field] = []
  } else {
    formOriginData[item.field] = ''
  }
}
const formData = ref(formOriginData)
console.log('%%%%%', formData.value)

// 重置操作
const handleRestClick = () => {
  formData.value = formOriginData
  emit('resetClick')
}

// 搜索操作
const handleQueryClick = () => {
  emit('queryClick', formData.value)
}

const searchRef = ref<HTMLElement>() // 搜索区域
const oneHeight = eventBus.colHeight // 单行文本高度
const searchFromHeight = ref<number>(0) // 搜索区域总高度
const isOverHeight = ref<Number>(0) // 搜索区域展示高度
const colLayout = props.searchFormConfig?.colLayout
onMounted(() => {
  nextTick(() => {
    // 计算总高度
    const count = 24 / colLayout.span
    const height = Math.ceil(formItems.length / count) * oneHeight
    searchFromHeight.value = height
    isOverHeight.value = searchFromHeight.value
    eventBus.isOverChange = props.isOver
    eventBus.isShowRowCount = props.isShowRowCount
    eventBus.formItems = formItems
    eventBus.colLayout = colLayout
  })
})

// 收起后高度
const showRowsHeight = computed(() => props.isShowRowCount * oneHeight)
// 展示/收起更多
const isOverChange = ref(props.isOver)

const handleChangeHeight = () => {
  // 计算隐藏后高度
  isOverChange.value = !isOverChange.value
  eventBus.isOverChange = isOverChange.value
  eventBus.isShowRowCount = props.isShowRowCount
  eventBus.formItems = formItems
  eventBus.colLayout = colLayout
  const height = isOverChange.value ? searchFromHeight.value : showRowsHeight.value
  isOverHeight.value = height
}
</script>

<style scoped>
.page-search {
  overflow: hidden;
  padding: 20px 20px 0;
  transition: height 0.5s ease;
}
.handle-btns {
  display: flex;
  justify-content: space-between;
  padding-right: 20px;

  .footer-btns {
    padding-left: 20px;
  }
}
</style>
